<template>
   <table border="1px">
    <tr>
      <td>用户名</td>
      <td>手机号码</td>
      <td>电子邮箱</td>
      <td>性别</td>
      <td>年龄</td>
      <td>头像</td>
      <td>操作</td>
    </tr>
    <tr>
      <td>{{ user.username }}</td>
      <td>{{ user.mobile }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.gender_display }}</td>
      <td>{{ user.age }}</td>
      <td><img :src="user.avatar"></td>
      <td><el-button type="primary" @click="showdialog">修改</el-button></td>
    </tr>
  </table>
  <el-button type="primary" @click="router.push('/homepage')">回到主页</el-button><br><br>
  <el-button type="primary" @click="router.push('/user_auth')">实名认证</el-button>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
    <span>
      用户名：<input type="text" name="username" id="username" v-model="new_user.username"><br>
      电话号：<input type="tel" name="mobile" id="mobile" v-model="new_user.mobile"><br>
      电子邮件：<input type="email" name="email" id="email" v-model="new_user.email"><br>
      <label for="male">男</label>
      <input type="radio" id="male" name="gender" value="0" v-model="new_user.gender">
      <label for="female">女</label>
      <input type="radio" id="female" name="gender" value="1" v-model="new_user.gender"><br>
      年龄：<input type="text" name="age" id="age" v-model="new_user.age"><br>
      头像：<input type="file" name="avatar" id="avatar" accept="image/png" @change="imagechange">
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="userupdate">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let dialogVisible = ref(false)

  let changeimage = ref(false)

  let access_token = localStorage.getItem("access_token")

  let user = ref({
    id:"",
    username: "",
    mobile: "",
    email: "",
    gender: "",
    gender_display: "",
    avatar: "",
    age: "",
  })

  let new_user = ref({})

  const getuserobj=()=>{
    axios.get(`http://127.0.0.1:8000/user/userRetrieve/`, {
      headers: {
        Authorization: "Bearer " + access_token
      }
    })
    .then(res=>{
      console.log(res)
      user.value = res.data.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const showdialog=()=>{
    new_user.value = { ...user.value }
    dialogVisible.value = true
  }

  const imagechange=(event)=>{
    new_user.value.avatar = event.target.files[0]
    changeimage.value = true
  }

  const userupdate=()=>{
    let fd = new FormData()
    if(new_user.value.username === ""){
      alert("用户名不能为空")
      return
    }
    fd.append("username", new_user.value.username)
    if(new_user.value.mobile){
      fd.append("mobile", new_user.value.mobile)
    }
    if(new_user.value.email){
      fd.append("email", new_user.value.email)
    }
    if(new_user.value.gender){
      fd.append("gender", new_user.value.gender)
    }
    if(new_user.value.age){
      fd.append("age", new_user.value.age)
    }
    if(changeimage.value){
      fd.append("avatar", new_user.value.avatar)
      changeimage.value = false
    }
    axios.patch(`http://127.0.0.1:8000/user/userUpdate/${user.value.id}/`, fd,
      {headers: {
        Authorization: "Bearer " + access_token
      }
    })
    .then(res=>{
      console.log(res)
      getuserobj()
    })
    .catch(error=>{
      console.log(error)
      if("mobile" in error.response.data && error.response.data.mobile[0] === "user with this 电话号码 already exists."){
        alert("该电话号码已注册")
      }
      if("non_field_errors" in error.response.data && error.response.data.non_field_errors[0] === "手机号格式错误"){
        alert("手机号格式错误")
      }
    })
  }

  onMounted(()=>{
    getuserobj()
  })

</script>
